(function (window) {
	'use strict';

	// 设置过滤器函数进行事项类别的选择
	let filters = {
		all(todos) {
			return todos;
		},
		active(todos) {
			return todos.filter(todo => !todo.completed);
		},
		Completed(todos) {
			return todos.filter(todo => todo.completed);
		}
	};
	// 封装函数，用于进行本地存储数据读取
	// 声明常量用于存储 本地存储中 保存事项的 键
	const TODOS_KEY = 'todos-vue';
	// 声明对象统一保存本地存储的处理功能
	let todoStorage = {
		// 读取本地存储数据
		get() {
			return JSON.parse(localStorage.getItem('TODOS_KEY')) || [];
		},
		// 更新本地存储
		set(todos){
			return localStorage.setItem('TODOS_KEY',JSON.stringify(todos))
		}
	}
	// Your starting point. Enjoy the ride!
	new Vue({
		el: "#app",
		data: {
			// todos 存储初始数据
			todos:todoStorage.get(),
			// todos: [
				// { id: 1, title: '示例内容1', completed: true },
				// { id: 2, title: '示例内容2', completed: false },
				// { id: 3, title: '示例内容3', completed: true }
				
			// ],

			// 存储新的数据
			newTodo: '',
			// 存储正在编辑的 todo
			editingTodo: null,
			// 存储正在编辑的todo原始内容
			titleBeforeEdit: '',
			// 存储要显示的事项类别
			todoType: 'all',
		},
		computed: {
			// 用于进项事项筛选
			filteredTodo() {
				return filters[this.todoType](this.todos);
			},


			// 获取待办事项的个数
			uncomp() {
				// return this.todos.filter(todo=> !todo.completed).length;
				// return this.todos.filter(function (todo) { return !todo.completed }).length;
				return filters['active'](this.todos).length;
			},

			// allDone:function(){
			// 	return this.uncomp===0;
			// }
			allDone: {
				get: function () {
					return this.uncomp === 0;
				},
				// value代表顶部选矿切换的状态
				set: function (value) {
					// 对所有事项进行遍历，this.todos是一个数组
					// this.todos.forEach(todo => {
					// 	todo.completed=value;	
					// });

					this.todos.forEach(function (todo) {
						todo.completed = value;
					});

				}

			},
		},
		methods: {
			// 单位处理

			// plu() {
			// 	return this.uncomp === 1 ? 'item' : 'items'
			// }

			plu(word) {
				return word + (this.uncomp === 1 ? '' : 's')
			},
			// 添加事项
			addTodo() {
				var value = this.newTodo.trim();
				if (!value) {
					return
				}
				this.todos.push(
					{ id: this.todos.length + 1, title: value, completed: false }
				)
				this.newTodo = ''
			},
			// 删除单个事项
			removeTodo(todo) {
				var index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},
			// 已完成事项的清除
			removeComplete() {
				// this.todos = this.todos.filter(todo => !todo.completed)
				this.todos = filters['active'](this.todos)
			},
			// 触发编辑保存之前的事项和编辑的事项
			editTodo(todo) {
				// 保存正在编辑的todo
				this.editingTodo = todo
				// 保存之前的todo的原始内容
				this.titleBeforeEdit = todo.title
			},
			// 取消编辑还原状态和内容
			cacelEdit(todo) {
				this.editingTodo = null;
				todo.title = this.titleBeforeEdit

			},
			// 保存编辑
			editDone(todo) {
				// 判断是否含有正在编辑的todo 如果没有就返回
				if (!this.editingTodo) return;
				this.editingTodo = null;
				todo.title = todo.title.trim();
				if (!todo.title) {
					this.removeTodo(todo)
				}


			}

		},
		// 自定义局部指令获取正在编辑的输入框获取焦点
		directives: {
			'todo-focus': function (el, binding) {
				if (binding.value) {
					// console.log(binding.value)
					// console.log(el)
					el.focus();
				}
			}
		},
		watch:{
			todos:{
				deep:true,
				handler:todoStorage.set
			}
		}
	})
})(window);
